diff options
Diffstat (limited to 'src/pages/[...path].tsx')
-rw-r--r-- | src/pages/[...path].tsx | 35 |
1 files changed, 26 insertions, 9 deletions
diff --git a/src/pages/[...path].tsx b/src/pages/[...path].tsx index 30fdcd6..9c7704e 100644 --- a/src/pages/[...path].tsx +++ b/src/pages/[...path].tsx @@ -1,12 +1,15 @@ import _ from 'lodash'; -import type { GetStaticPropsContext, NextPage } from "next"; +import type { GetStaticPropsContext, NextPage } from 'next'; import ReactMarkdown from 'react-markdown'; -import Head from "next/head"; -import deepReadDir from "../deepReadDir"; +import Head from 'next/head'; +import Emoji from '../Emoji'; +import deepReadDir from '../deepReadDir'; +import emojiPlugin from '../emojiPlugin'; import fs from 'fs'; const MARKDOWN_DIR = '../eug-vs-xyz/src'; +const EMOJI_DIR = 'public/emoji'; const transformLinkURI = (uri: string): string => { return uri.match(/(.*)\.md/)?.[1] || uri; @@ -15,9 +18,12 @@ const transformLinkURI = (uri: string): string => { export const getStaticProps = async (context: GetStaticPropsContext) => { const path = _.isArray(context.params?.path) && context.params?.path || [context.params?.path]; const markdownSource = fs.readFileSync(`${MARKDOWN_DIR}/${path?.join('/')}.md`).toString(); + const emojiFileNames = fs.readdirSync(EMOJI_DIR); + return { props: { markdownSource, + emojiFileNames, path, } } @@ -30,23 +36,34 @@ export const getStaticPaths = async () => { .filter(p => p) .map(p => p?.split('/')) .map(path => ({ params: { path } })); - console.log(paths); return { paths, fallback: false, } } -const Page: NextPage = ({ markdownSource }: any) => { +const Page: NextPage = ({ markdownSource, emojiFileNames }: any) => { return ( <> <Head> - <title>Create T3 App</title> - <meta name="description" content="Generated by create-t3-app" /> - <link rel="icon" href="/favicon.ico" /> + <title>{`Eugene's Space`}</title> + <meta name="description" content="TODO" /> + <link rel="icon" href="/icon-64.png" /> </Head> <main> - <ReactMarkdown transformLinkUri={transformLinkURI}>{markdownSource}</ReactMarkdown> + <ReactMarkdown + children={markdownSource} + transformLinkUri={transformLinkURI} + rehypePlugins={[emojiPlugin(emojiFileNames)]} + components={{ + emoji: Emoji, + h1: 'h2', + h2: 'h3', + h3: 'h4', + h4: 'h5', + h5: 'h6', + } as any} + /> </main> </> ); |